<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>考核计划</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/performance-management/appraise-plan.css">
    <style>
      
    </style>
  </head>

  <body>
    <div class="title-name">
      <div class="page-header">
        <span class="title-style"></span><h4>考核计划</h4>
      </div>
      <!--  -->
      <div class="search-reset">
        <!-- 搜索 -->
        <div class="search">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="searchInput"
              placeholder="考核计划名称搜索"
            />
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" id="searchBtn">
                搜索
              </button>
            </span>
          </div>
        </div>
        <!-- 重置 -->
        <button type="button" class="btn btn-default" id="resetBtn">重置</button>
      </div>
    </div>
    <!-- 新增 -->
    <div class="newBtn-box">
      <button
        type="button"
        class="btn btn-info newBtn"
        data-toggle="modal"
        data-target="#myModal"
      >
        + 新增考核计划
      </button>
    </div>
    <!-- 表格 -->
    <div class="table-box">
      <table class="table">
        <thead>
          <tr>
            <th>考核计划名称</th>
            <th>考核范围</th>
            <th>考核周期类型</th>
            <th>考核周期</th>
            <th>考核状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td>产品1</td>
            <td>23/11/2013</td>
            <td>待发货</td>
            <td>产品1</td>
            <td><input type="text" disabled placeholder="未开始"></td>
            <td>
              <button type="button" class="btn btn-success">编辑</button>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>

    <!-- 页码 -->
    <div class="pagination-box">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous" id="pre">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="pagination-num"></li>
        <li>
          <a href="#" aria-label="Next" id="next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- 模态框（Modal） -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">考核计划</h4>
          </div>
          <div class="modal-body">
            <p>考核计划名称：<input id="dataName" type="text" /></p>
            <p>考核范围：<input id="dataRange" type="text" /></p>
            <p>考核周期类型：<input id="dataType" type="text" /></p>
            <p>考核周期：<input id="dataCycle" type="text" /></p>
            <p>考核状态：<input id="dataState" type="text" /></p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-default cancelBtn"
              data-dismiss="modal"
            >
              关闭
            </button>
            <button
              type="button"
              class="btn btn-primary confirm-add"
              id="confirm-update"
            >
              提交更改
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
  </body>

  <script>
    // 数据
    let data = [
      {
        id: 1,
        name: "研发部考核计划1",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 2,
        name: "研发部考核计划2",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 3,
        name: "研发部考核计划3",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 4,
        name: "研发部考核计划4",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 5,
        name: "研发部考核计划5",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 6,
        name: "研发部考核计划6",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 7,
        name: "研发部考核计划7",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 8,
        name: "研发部考核计划8",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 9,
        name: "研发部考核计划9",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 10,
        name: "研发部考核计划10",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 11,
        name: "研发部考核计划11",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 12,
        name: "研发部考核计划12",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 13,
        name: "研发部考核计划13",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 14,
        name: "研发部考核计划14",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 15,
        name: "研发部考核计划15",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 16,
        name: "研发部考核计划16",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 17,
        name: "研发部考核计划17",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 18,
        name: "研发部考核计划18",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 19,
        name: "研发部考核计划19",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 20,
        name: "研发部考核计划20",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 21,
        name: "研发部考核计划21",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
      {
        id: 22,
        name: "研发部考核计划22",
        range: "研发一组,研发二组",
        type: "半年度",
        cycle: "2022-01~2022-06",
        state: "未开始",
      },
    ];
    // 每页展示5个
    const pageSize = 5;

    // Tbody动态渲染
    function renderTbody(data, currentPage = 1) {
      // 渲染paging
      renderPaging(data, currentPage);
      // 清空页面
      $("tbody").empty();

      const startIndex = pageSize * (currentPage - 1);
      const endIndex = startIndex + pageSize;
      const dataByPaging = data.slice(startIndex, endIndex);
      console.log(
        "startIndex,endIndex,dataByPaging",
        startIndex,
        endIndex,
        dataByPaging
      );
      for (let i = 0; i < dataByPaging.length; i++) {
        const dataId = dataByPaging[i].id;
        const dataName = dataByPaging[i].name;
        const dataRange = dataByPaging[i].range;
        const dataType = dataByPaging[i].type;
        const dataCycle = dataByPaging[i].cycle;
        const dataState = dataByPaging[i].state;
        console.log("dataName", dataName);

        $("tbody").append(`
        <tr>
          <td>${dataName}</td>
          <td>${dataRange}</td>
          <td>${dataType}</td>
          <td>${dataCycle}</td>
          <td><input type="text" disabled placeholder=${dataState}></td>
          <td>
            <button type="button"  data-toggle="modal" data-target="#myModal" class="btn btn-success update" data-id="${dataId}">编辑</button>
            <button type="button" class="btn btn-danger del" data-id="${dataId}">删除</button>
          </td>
        </tr>
    `);
      }
    }
    renderTbody(data);

    /*
  分页
*/
    function renderPaging(data, currentPage = 1) {
      // 清空
      $(".pagination-num").empty();

      const num = Math.ceil(data.length / pageSize);
      console.log(
        "num",
        num,
        "data.length",
        data.length,
        "currentPage",
        currentPage
      );
      for (let i = 1; i <= num; i++) {
        $(".pagination-num").append(`
            <a href="#">${i}</a>
      `);
      }
      $(".pagination-num>a")
        .eq(currentPage - 1)
        .addClass("currentPageColor");
    }

    // 处理上一页
    $("#pre").on("click", function (event) {
      // 获取到当前页
      const currentPage = parseInt(
        $(".pagination-num > .currentPageColor").text()
      );
      // 当前页为1  就不能上一页
      if (currentPage === 1) {
        return;
      }

      renderTbody(data, currentPage - 1);
    });

    // 处理下一页
    $("#next").on("click", function (event) {
      // 获取到当前页
      const currentPage = parseInt(
        $(".pagination-num > .currentPageColor").text()
      );

      console.log();
      const max = Math.ceil(data.length / pageSize);
      // 当前页为 max 就不能下一页
      if (currentPage === max) {
        return;
      }

      renderTbody(data, currentPage + 1);
    });
    // 为每一个页码添加点击事件
    $(".pagination-num").on("click", "a", function (event) {
      // 清空所有的样式
      $("#paging > a").removeClass(".pagination-num a");
      $(event.target).addClass("currentPageColor");
      // 获取点击页面
      const currentPage = parseInt($(event.target).text());
      renderTbody(data, currentPage);
    });

    // 刪除
    $("tbody").on("click", ".del", function (event) {
      $("body").append(`
            <div class="modal fade" id="myModal-del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">删除提示</h4>
                        </div>
                        <div class="modal-body">
                            是否删除该条数据？
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default cancelBtn-del" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="confirm-del">
                                确认删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `);
      // 显示模态框
      $("#myModal-del").modal("show");
      var id = parseInt(event.target.dataset.id);
      // 确认删除
      $("#myModal-del").on("click", "#confirm-del", (event) => {
        // $(this).parent().parent().remove();

        for (let i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            data.splice(i, 1);
            break;
          }
        }
        // 隐藏模态框
        $("#myModal-del").modal("hide");
        // 基于新的数据重新渲染
        renderTbody(data);
      });
    });

    // 修改
    $("tbody").on("click", ".update", function (event) {
      let id = parseInt($(event.target).attr("data-id"));

      // 找到对应data的数据，然后填到input里
      for (let i = 0; i < data.length; i++) {
        if (data[i].id === id) {
          $("#dataName").val(data[i].name).text();
          $("#dataRange").val(data[i].range).text();
          $("#dataType").val(data[i].type).text();
          $("#dataCycle").val(data[i].cycle).text();
          $("#dataState").val(data[i].state).text();
        }
      }
    });
    // 确认修改
    $("#confirm-update").on("click", function (event) {
      // 获取input的值
      const name = $("#dataName").val();
      const range = $("#dataRange").val();
      const type = $("#dataType").val();
      const cycle = $("#dataCycle").val();
      const state = $("#dataState").val();

      // 修改input里面的值
      for (let i = 0; i < data.length; i++) {
        if (data[i].id === id) {
          data[i].name = name;
          data[i].range = range;
          data[i].type = type;
          data[i].cycle = cycle;
          data[i].state = state;
        }
      }
      // 重新渲染
      // renderTbody(data);
      // 隐藏
      $("#myModal").modal("hide");
    });

    // 新增
    $(".confirm-add").on("click", function (event) {
      // 获取input的值
      const name = $("#dataName").val();
      const range = $("#dataRange").val();
      const type = $("#dataType").val();
      const cycle = $("#dataCycle").val();
      const state = $("#dataState").val();
      console.log({ range, name, type, cycle, state });
      // 判断为空
      if (!name || !range || !type || !cycle || !state) {
        alert("请填写完整的表单");
        return;
      }
      // 获取用户输入的值
      var userInfo = {
        id: data.length ? data[data.length - 1].id + 1 : 1,
        name,
        range,
        type,
        cycle,
        state,
      };

      // 添加到data这个数据里面
      data.push(userInfo);
      // 重新渲染
      renderTbody(data);
      // 清空input里面的数据
      $("#dataName").val("");
      $("#dataRange").val("");
      $("#dataType").val("");
      $("#dataCycle").val("");
      $("#dataState").val("");
    });

    // 搜索
    $("#searchBtn").on("click", function (event) {
      // 获取searchInput搜索框输入的内容
      let searchValue = $("#searchInput").val();
      // 判空
      if (!searchValue) {
        // 清空的时候显示原来的数据
        renderTbody(data);
        return;
      }
      const searchData = [];
      for (let i = 0; i < data.length; i++) {
        if (data[i].name.includes(searchValue)) {
          searchData.push(data[i]);
        }
      }
      renderTbody(searchData);
    });

    // 重置
    $("#resetBtn").on("click", function (event) {
        $("#searchInput").val("");
        renderTbody(data);
      });
  </script>
</html>
